<template>
  <div class="flow-draw" v-loading="loadingDiagram">
    <el-scrollbar class="flow-draw-scroll">
      <div id="history-myflow"></div>
    </el-scrollbar>
  </div>
</template>

<script>
/** mixins */
/** 子组件 */
import { validateNull } from '@tapui/utils/validate'
import topscommConst from '@tapui/const/tapConst'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  components: {},
  data() {
    return {
      urlPrefix: '/cbo/approvalFlowIns/',
      url: {
        // 额外的url
        list: '/cbo/approvalNodeIns/list',
        viewDiagram: '/cbo/approvalFlow/viewDiagram'
      },
      loadingDiagram: false
    }
  },
  props: {
    sourceId: {
      type: Number,
      default: 0,
      required: true
    },
    sourceType: {
      type: String,
      default: '',
      required: true
    }
  },
  methods: {
    loaded() {
      // 页面加载完毕执行
    },
    open() {
      this.queryDiagram()
    },
    queryDiagram() {
      this.loadingDiagram = true
      let param = {
        sourcetype: this.sourceType,
        sourceid: this.sourceId
      }
      getAction(this.url.viewDiagram, param)
        .then((res) => {
          if (res.success) {
            this.drawDiagram(res.result)
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.loadingDiagram = false
        })
        .catch((err) => {
          this.loadingDiagram = false
        })
    },
    drawDiagram(map) {
      /* eslint-disable*/
      $('#history-myflow').html('')
      let restore = map.strdiagram
      restore = restore.replace(/'/g, '"')
      if (restore !== '') {
        restore = JSON.parse(restore)
      }
      let history = map.strhistory
      history = history.replace(/'/g, '"')
      history = history.replace(/activeRects/g, '"activeRects"')
      history = history.replace(/historyRects/g, '"historyRects"')
      history = history.replace(/rects/g, '"rects"')
      history = history.replace(/paths/g, '"paths"')
      history = history.replace(/code/g, '"code"')
      if (history !== '') {
        history = JSON.parse(history)
      }
      $('#history-myflow').myflow(
        $.extend(true, {
          basePath: '',
          restore: restore,
          editable: false,
          ...history
        })
      )
    }
  }
}
</script>

<style lang="scss">
.flow-draw {
  width: 100%;
  height: 352px;
  overflow: hidden;
  background: url('/static/plugins/myflow/img/bg.png') repeat;
  border: 1px solid #ccc;
  .flow-draw-scroll {
    width: 100%;
    height: 352px;
    overflow-x: hidden;
  }
}
</style>
